import { View, Picker, MovableView } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useEffect,useState} from "react";
import { AtAccordion,AtIcon } from 'taro-ui'
import { getAllPositionArea,getAllPositionPositionType,getSpecificPosition } from "../../api/mode";
import {PostCard} from '../index'
import './index.scss'

export default function PositionChoose(props){ 

  const openid=Taro.getStorageSync(`openid`)

  const [areaSelector,setAreaSelector]= useState(['地区不限'])
  const [positionTypeSelector,setPositionTypeSelector]= useState(['无要求'])
  const salarySelector=['3000-5000','5001-8000','8001-10000','10001-15000','15001-25000','25000以上']//调整薪资选择列表

  const [areaselectorCheck,setAreaSelectorCheck]=useState('')
  const [positionselectorCheck,setPositionSelectorCheck]=useState('')
  const [salaryselectorCheck,setSalarySelectorCheck]=useState('')

  const [specificPositionList,setSpecificPositionList]=useState()
  
  //分页
  const [PositionpageNum,setPositionPageNum]=useState(1)
  const [positionFlag,setPositionFlag]=useState(false)

  useEffect(()=>{
    //初始获得职位和地区的下拉列表
    getAllPositionArea().then(res=>{setAreaSelector(res.data.data)})
    getAllPositionPositionType().then(res=>{setPositionTypeSelector(res.data.data)})
  },[])

  useEffect(()=>{
    setPositionPageNum(props.pageNum)
  },[props.pageNum])


  //这个是选择器
  useEffect(()=>{
    let lowSal=0,highSal=25
    if(salaryselectorCheck=='3000-5000'){
      lowSal=3,highSal=5
    }else if(salaryselectorCheck=='5100-8000'){
      lowSal=5,highSal=8
    }
    else if(salaryselectorCheck=='8001-10000'){
      lowSal=8,highSal=10
    }
    else if(salaryselectorCheck=='10001-15000'){
      lowSal=10,highSal=15
    }
    else if(salaryselectorCheck=='15001-25000'){
      lowSal=15,highSal=25
    }
    else if(salaryselectorCheck=='25000以上'){
      lowSal=25,highSal=25
    }
    const specificPosition={//设置请求参数
      area:areaselectorCheck,
      type:positionselectorCheck,
      openid:openid,
      lowSal:lowSal,
      highSal:highSal,
      page:1,
      size:5,//表示每个分页的条数
    }


    //修改筛选条件后将num置1
    props.changePositionNum()


    getSpecificPosition(specificPosition).then(//获取特定的职位
      res=>{
        res.data.data?setSpecificPositionList(res.data.data.records):setSpecificPositionList([])
        if(!res.data.data){
          Taro.showToast({
            title:"暂无目标职位",
              icon:'error',
              duration:1500,
          })
        }
      }
    )

  },[areaselectorCheck,positionselectorCheck,salaryselectorCheck])

  //这个是分页
  useEffect(()=>{
    let lowSal=0,highSal=25
    if(salaryselectorCheck=='3000-5000'){
      lowSal=3,highSal=5
    }else if(salaryselectorCheck=='5100-8000'){
      lowSal=5,highSal=8
    }
    else if(salaryselectorCheck=='8001-10000'){
      lowSal=8,highSal=10
    }
    else if(salaryselectorCheck=='10001-15000'){
      lowSal=10,highSal=15
    }
    else if(salaryselectorCheck=='15001-25000'){
      lowSal=15,highSal=25
    }
    else if(salaryselectorCheck=='25000以上'){
      lowSal=25,highSal=25
    }
    const specificPosition={//设置请求参数
      area:areaselectorCheck,
      type:positionselectorCheck,
      openid:openid,
      lowSal:lowSal,
      highSal:highSal,
      page:PositionpageNum,
      size:5,//表示每个分页的条数
    }
    if(PositionpageNum>1&&!positionFlag){
      getSpecificPosition(specificPosition).then(//获取特定的职位
      res=>{
        if(!res.data.data.records.length){
          setPositionFlag(true)
          Taro.showToast({
            title:'没有更多职位了',
            icon:'error',
            duration:2000
          })
        }
        setSpecificPositionList([
          ...specificPositionList,
          ...res.data.data.records,
        ])
      }
    )
    }
    

  },[PositionpageNum])


 

  return (
    <View className='positionChoose'>

      <View className='at-row positionPickerback '>

        <View className='at-col  positionPicker positionChooseCard'>
        <Picker mode='selector' range={positionTypeSelector} onChange={(e)=>{console.log(e);setPositionSelectorCheck(positionTypeSelector[e.detail.value])}}>
                <View className='picker'>
                <View className='makePosition'>
                  {positionselectorCheck?positionselectorCheck:'岗位选择'}
                  <AtIcon value='chevron-down' size='20' color='#00F' className='chevron'></AtIcon>
                </View>
                </View>
          </Picker>
        </View>
        

        <View className='at-col  positionPicker positionChooseCard'>
        <Picker mode='selector' range={areaSelector} onChange={(e)=>{console.log(e);setAreaSelectorCheck(areaSelector[e.detail.value])}}>
                <View className='picker'>
                <View className='makePosition'>
                  {areaselectorCheck?areaselectorCheck:'地区选择'}
                  <AtIcon value='chevron-down' size='20' color='#00F' className='chevron'></AtIcon>
                </View>
                </View>
          </Picker>
        </View>

        <View className='at-col  positionPicker positionChooseCard'>
        <Picker mode='selector' range={salarySelector} onChange={(e)=>{console.log(e);setSalarySelectorCheck(salarySelector[e.detail.value])}}>
                <View className='picker'>
                  <View className='makePosition'>
                  {salaryselectorCheck?salaryselectorCheck:'薪资要求'}
                  <AtIcon value='chevron-down' size='20' color='#00F' className='chevron'></AtIcon>
                  </View>
                </View>
          </Picker>
        </View>

    

      </View>


      <View>
          {specificPositionList
          ?
          specificPositionList.map((Info,index)=>(<PostCard key={index} canJump isCollected={Info.collected} Info={Info}></PostCard>))
          :
          null}
        </View>
    </View>
  )
}

